<script setup>
import { ref } from 'vue';
import router from "@/router/index.js";

let menuItems = ref([
  { label: '首页', icon: 'el-icon-house', route: '/home/index' },
  { label: '订单', icon: 'el-icon-search', route: '/home/shopping' },
  { label: '个人中心', icon: 'el-icon-user', route: '/home/user' },
]);

let activeItem = ref('home');  // 初始激活状态设为首页

let handleMenuClick = (item) => {
  activeItem.value = item.route;  // 更新当前激活的菜单项
  // 这里可以添加路由跳转逻辑
  // console.log(item.route)

  router.push(item.route);
}
</script>

<template>
  <div>
    <router-view></router-view>
  </div>
  <div class="bottom-menu">
    <el-row type="flex" justify="center">
      <el-col v-for="item in menuItems" :key="item.route" :span="5">
        <el-button type="text" :class="{ 'is-active': activeItem === item.route }" @click="handleMenuClick(item)">
          <i :class="item.icon"></i>
          <div>{{ item.label }}</div>
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.bottom-menu {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 -1px 4px rgba(51, 29, 29, 0.1);
}

.el-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60px;
  color: rgba(17, 17, 17, 0.98);
  transition: color 0.0s, background-color 0.0s;
}

.el-button:hover,
.el-button:focus {
  color: #ff4079;
}

.el-button.is-active {
  background-color: rgba(210, 22, 22, 0.13);
}
</style>